<template>
  <!-- 顶部 Tab 切换 -->
  <div class="tab-header">
    <button 
      v-for="(tab, index) in tabs" 
      :key="index" 
      @click="activeTab = tab.value"
      :class="{ active: activeTab === tab.value }"
    >
      {{ tab.label }}
    </button>
  </div>

  <!-- 下方嵌套页面，根据 activeTab 切换组件 -->
  <div class="tab-content">
    <component :is="currentComponent" />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
// 假设引入各入库方式对应的组件（实际需根据项目创建）
// import PurchaseInbound from './components/PurchaseInbound.vue'  
// import ProcessInbound from './components/ProcessInbound.vue'  
// import DirectInbound from './components/DirectInbound.vue'  

// 定义 Tab 数据：label 是显示文案，value 关联组件
const tabs = [
  { label: '采购入库任务', value: 'purchase' },
  { label: '加工入库任务', value: 'process' },
  { label: '直接入库任务', value: 'direct' }
]

// 当前激活的 Tab
const activeTab = ref('purchase')  

// 根据 activeTab 动态渲染组件
const currentComponent = computed(() => {
  switch (activeTab.value) {
    case 'purchase':
      return PurchaseInbound  
    case 'process':
      return ProcessInbound  
    case 'direct':
      return DirectInbound  
    default:
      return PurchaseInbound
  }
})
</script>

<style scoped>
.tab-header {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}
.tab-header button {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
.tab-header button.active {
  background: #f0f0f0;
  border-color: #999;
}
</style>